<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>An HTML Template</title>
<style>
form{width:400px;border:4px solid #8E8E8E;border-radius:4px;}
#topmenu{background:-moz-linear-gradient(#FFFFFF,#EEEEEE);padding:5px 15px;font-weight:bold;}
#closebutton{float:right;}
#closebutton:hover{cursor:pointer;}
#maincontent{margin-top:2px;border-top:1px solid #EEEEEE;padding:40px;}
#maincontent section{margin-bottom:10px;}
#maincontent section:nth-child(3){padding-bottom:20px;border-bottom:1px solid #DCDCDC;}
#maincontent section input{padding:10px;margin-right:10px;}
a{text-decoration:none;color:#3D6BA7;}
a:hover{text-decoration:underline;}
a,label{font-size:14px;}
input[type=submit]{background:#569020;color:white;border-radius:8px;}
input[type=checkbox]{margin-right:2px;}
</style>
<script>

</script>
</head>
<body>
<form id="loginform" action="#" method="post">
<section id="topmenu">
	<span>登录</span>
	<span id="closebutton">关闭</span>
</section>
<section id="maincontent">
	<section>
		<input type="text" id="name" placeholder="手机号/昵称/邮箱" autofocus required />
		<a href="#">立即注册</a>
	</section>
	<section>
		<input type="password" required />
		<a href="#">忘记密码？</a>
	</section>
	<section>
		<input type="submit" value="登录"  />
		<input type="checkbox" /><label>下次自动登录</label>
	</section>
	<section>
		<label>社交账号登入:</label>
	</section>
</section>
</form>
<script>
document.getElementById("closebutton").onclick=function(){
	document.getElementById("loginform").style.display="none";
}
</script>
</body>
</html>